<template>
  <div id="app">
    <ul class="wrapper">
      <li v-for="(item, index) in list" :key="'item' + index">
        <i class="fas fa-chevron-circle-right" :class="{ open: item.open }"></i>
        <div class="title" @click="item.open = !item.open">{{ item.title }} -- {{ item.open }}</div>
        <ListItem :list="item" />
      </li>
    </ul>
  </div>
</template>

<script>
import ListItem from "./components/ListItem.vue";
import { ref } from "vue";
export default {
  components: {
    ListItem,
  },

  setup() {
    const open = ref(false);
    const list = ref([{ title: "Projects", open: true, sublist: ["Vue.js", "SCSS", "JavaScript", "Webpack"] }]);

    return { list, open };
  },
};
</script>

<style lang="scss">
@import url("https://use.fontawesome.com/releases/v5.11.0/css/all.css");
@import url("https://fonts.googleapis.com/css?family=Oswald");

body {
  font-size: 1rem;
  font-family: "Oswald", Tahoma;
  background-color: #86bb89;
  color: #333;
}

.wrapper {
  list-style: none;
}

li {
  position: relative;
  cursor: pointer;
  background-color: #fefefe;
}

i {
  position: absolute;
  right: 10px;
}
</style>
